<template>
  <view style="height: 100vh" class="f_column">
    <head-bar-view :title="title" title-color="#fff" is-white-back="true"
    />
    <select-head-view :title1="title" hint1="当前楼层："
                      @sure="sure" :select-list="selectList"
    />
    <view style="position: fixed;bottom: 0;">
      <i class="el-icon-zoom-in" style="padding: 20rpx" @click="toMaxScale"></i>
      <i class="el-icon-zoom-out" style="padding: 20rpx" @click="toMinScale"></i>
    </view>

    <div v-if="svgImg!=''" v-html="svgImg" ref="svgImg" class="flex_1 svgImg" style="overflow: hidden;">

    </div>
    <view v-else>
      <no-data-view :load-state="loadState"/>
      <view v-if="loadState!='loading'" class="no-data-cls">暂无数据</view>
    </view>
  </view>
</template>

<script lang="ts">
import {Vue, Component} from "vue-property-decorator";
import XRouterConfig from "@/api/XRouterConfig";
import HeadBarView from "@/pages/components/head_bar_view.vue";
import ApiDefine from "@/api/ApiDefine";
import BaseApi from "@/api/BaseApi";
import DropdownMenu from "@/pages/components/dropdown-menu.vue";
import DropdownItem from "@/pages/components/dropdown-item.vue";
import {svgDrag} from "@/mixins/SvgDirective";
import {mixins} from "vue-class-component";
import TypeConfig from "@/mixins/TypeConfig";
import NoDataView from "@/pages/components/no_data_view.vue";
import SelectHeadView from "@/pages/components/select_head_view.vue";
import DrawSelectView from "@/pages/components/draw_select_view.vue";
import StateConfig from "@/mixins/StateConfig";

@Component({
  components: {
    HeadBarView,
    DropdownMenu,
    DropdownItem,
    NoDataView,
    SelectHeadView,
    DrawSelectView,
  }
})
export default class UnitHouseLevelImgView extends mixins(TypeConfig, Vue, StateConfig) {
  back_click() {
    XRouterConfig.back(0)
  }

  toMaxScale() {
    let svgHtml: any = (document.getElementsByTagName("svg") as any)[0];
    if (svgHtml.currentScale > 5) {
      BaseApi.instance().showToast('当前页面无再放大了')
      return;
    }
    svgHtml.currentScale = svgHtml.currentScale * 1.5
  }

  selectList = [
    {
      title: '选择楼层',
      list: [],
    },
  ];

  setSelectList() {
    this.houseList.forEach((it: any, index: any) => {
      it.title = it.layername;
      if (index == 0) {
        this.bliid = this.houseList[0].bliid;
        this.title = this.houseList[0].layername;
        it.isChose = true;
        return
      }
      it.isChose = false;
    })
    this.selectList.forEach((item: any) => {
      item.list = this.houseList
    })
  }

  sure(title: any, ind: any, index: any) {
    this.choseHouse(this.selectList[ind].list[index])
    this.initData()
  }

  toMinScale() {
    let svgHtml: any = (document.getElementsByTagName("svg") as any)[0];
    if (svgHtml.currentScale < 0.2) {
      BaseApi.instance().showToast('当前页面无法在缩小了')
      return;
    }
    svgHtml.currentScale = svgHtml.currentScale / 2
  }

  title = ''

  osid: any = ''
  offid: any = ''
  bliid: any = ''

  loadState = 'loading'

  onLoad(option: any) {
    this.osid = option.osid ?? ''
    this.offid = option.offid ?? ''
    // this.bliid = option.bliid ?? ''
    // this.initData();
    this.initHouseLevel(this.osid, this.offid);
  }

  houseList: any = [];

  async initHouseLevel(osid: any, offid: any) {
    let value = await BaseApi.instance().fetch(ApiDefine.UNIT_HOUSE_LEVEL_LIST_URL, {
      osid,
      offid,
    })
    if (value == null || value.code != 200) {
      return;
    }
    this.houseList = value.data;
    if (this.houseList.length == 0) {
      return;
    }
    this.setSelectList();
    this.initData()
  }


  choseHouse(item: any) {
    // (this.$refs.houseDrop as any)?.close()
    this.bliid = item.bliid
    this.title = item.layername;
    this.initData()
  }

  svgImg: any = ''
  info: any = {};

  async initData() {
    this.loadState = 'loading'
    let value = await BaseApi.instance().fetch(ApiDefine.UNIT_HOUSE_LEVEL_IMG_URL, {
      osid: this.osid,
      offid: this.offid,
      bliid: this.bliid,
    })
    this.loadState = ''
    if (value == null || value.code != 200) {
      return;
    }
    this.info = value.data;
    this.svgImg = value.data.svg
    this.$nextTick(() => {
      // let svgHtml: any = (document.getElementsByTagName("svg") as any)[0];
      svgDrag((this.$refs as any).svgImg);
      this.setSvgColor();
      //this.setSvgText()
      this.getShapList();

    })
  }

  //设置svg指定的颜色
  setSvgColor() {
    this.info?.roomlist.forEach((item: any) => {
      let child = (document.getElementById(item.indexid) as any)?.firstElementChild;
      if (child == null) {
        return;
      }
      child.style.fill = this.roomType[item.roomtype];
    })
  }

  setSvgText() {
    this.info?.roomlist.forEach((item: any) => {
      let child = (document.getElementById(item.indexid) as any)?.nextElementSibling;
      if (child == null) {
        return;
      }
      let aChild = child.lastElementChild;
      //设置面积
      aChild.childNodes.forEach((it:any)=>{
        console.log(it.firstChild);
        if (it.nodeValue == '平方米') {
          let title:any = document.createTextNode('')
          it.replaceWith(title)
        }else if (it.firstChild!=null){
          if( aChild.childNodes.length<4){
            let title:any = document.createTextNode(item.area+'㎡');
            (it.firstChild).replaceWith(title);
            it.setAttribute('dy',(this.info.lineHeight/10)+'em');
            it.setAttribute('x',Number.parseFloat(it.getAttribute('x'))+5);
            it.style = `font-size:${(this.info.fontSize)}em; font-weight: normal;`
            it.setAttribute('class','st3');
          }
        }
      })


      //设置房间名
      let tspan = aChild.getElementsByTagName("tspan")
      let textChild = (aChild as any).firstChild;
      let cloneSpan1 = tspan[0].cloneNode(false);
      let title = document.createTextNode(item.roomname)
      cloneSpan1.appendChild(title)
      cloneSpan1.style = `font-size:${(this.info.fontSize)}em; font-weight: bolder;`
      // cloneSpan1.setAttribute('dy','1.5em');
      // cloneSpan1.setAttribute('x',cloneSpan1.getAttribute('x')+5);
      textChild.replaceWith(cloneSpan1)

      //设置房间小类
      let cloneSpan2 = tspan[0].cloneNode(false);
      let title2 = document.createTextNode(item.stypename)
      cloneSpan2.appendChild(title2)
      cloneSpan2.style = `font-size:${(this.info.fontSize)}em; font-weight: bolder;`
      // cloneSpan2.setAttribute('dy','1.5em');
      // cloneSpan2.setAttribute('x',cloneSpan2.getAttribute('x')+5);

      //设置房间人数
      let cloneSpan3 = tspan[0].cloneNode(false);
        let title3 = document.createTextNode(item.users.length + "人")
      cloneSpan3.style = `font-size:${(this.info.fontSize)}em; font-weight: normal;`
      // cloneSpan3.setAttribute('dy','1.5em');
      // cloneSpan3.setAttribute('x',cloneSpan3.getAttribute('x')+5);
        cloneSpan3.appendChild(title3)

      if( aChild.childNodes.length<4){
        aChild.appendChild(cloneSpan2)
        aChild.appendChild(cloneSpan3)
      }

    })
  }

  getShapList() {
    //找到未渲染的数据清空数据
    (document.getElementsByTagName("svg") as any)[0]?.querySelectorAll('[id^="shape"] > text').forEach((item: any) => {
      let isShow = false;
      this.info?.roomlist.forEach((it: any) => {
        // console.log((document.getElementById(it.indexid) as any),it.indexid)
        if ((document.getElementById(it.indexid) as any).parentNode.id == item.parentNode.parentNode.id) {
          isShow = true;
          return;
        }
      });
      if (!isShow) {
        item.parentNode.innerHTML = ""
      }
      // console.log( );
      // item.parentNode.innerHTML = ""
      // item.parentNode
    })

    // document.getElementsByTagName("svg") as any)[0].querySelectorAll('img')
  }


}
</script>

<style scoped>
.head_cls {
  position: fixed;
  width: 100vw;
  z-index: 1;

}

.item_picker {
  padding: 20rpx;
  color: #000000;
}

.no-data-cls {
  width: 100%;
  text-align: center;
  font-size: 28rpx;
  margin-top: 20rpx;
  color: #999999;
}
.svgImg >>> .st4 {
  font-size: 0.7em;
}
.svgImg >>> .st3  {
  font-size: 0.7em;
}
</style>